<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>购彩大厅</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcss.com/dayjs/1.7.8/dayjs.min.js"></script>
<link href="/css/common/common.css" rel="stylesheet" type="text/css">
<style type="text/css">
.game-category-navbar {
	margin-bottom: 8px;
	padding-top: 0;
	padding-bottom: 0;
	justify-content: center;
	background-color: #FAFAFA;
}

.game-category-navbar li {
	padding-bottom: 4px;
	padding-top: 4px;
	min-width: 150px;
	text-align: center;
	cursor: pointer;
}

.game-category-navbar .nav-item .nav-link {
	color: #333;
	font-size: 15px;
}

.selected-game-category-nav-item {
	border-bottom: 3px solid #ec494c;
}

.selected-game-category-nav-item>a, .game-category-navbar li:hover>a {
	color: #fe0200 !important;
}

.game-block {
	
}

.game {
	
}

.game-body {
	display: flex;
	flex-flow: column;
	border: 1px solid #ebebeb;
	margin-bottom: 20px;
	border-radius: 4px;
}

.game-row1 {
	display: flex;
	flex: 2;
	padding-left: 10px;
	padding-top: 5px;
}

.game-logo {
	flex: 0.5;
	display: flex;
	align-items: center;
	padding-right: 14px;
}

.game-logo img {
	height: 80px;
	width: 80px;
}

.game-name-and-issue-num {
	flex: 1;
}

.game-issue-num {
	color: red;
}

.game-name-and-issue-num div {
	height: 34px;
}

.hot-game-logo {
	height: 36px;
	position: absolute;
	right: 26px;
	top: 0px;
}

.game-pre-issue-lottery-label {
	flex: 1;
	padding-left: 10px;
}

.game-pre-issue-lottery {
	flex: 1;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.game-pre-issue-lottery span {
	width: 18px;
	height: 18px;
	font-weight: normal;
	display: inline-block;
	background-color: #1783c6;
	background: linear-gradient(#f56868, #cb3a3a);
	color: #fff;
	line-height: 18px;
	text-align: center;
	margin: 0 2px;
	border-radius: 10px;
}

.game-lottery-tip {
	color: #ffc200;
}

.game-action {
	flex: 1;
}

.game-action .btn-group {
	width: 100%;
}

.game-action button {
	width: 50%;
	border-radius: unset;
	margin-left: unset !important;
}

.countdown-clock span {
	background: #fff;
	border: 1px solid #eee;
	padding: 1.5px;
}

.countdown-clock em {
	font-style: unset;
}
</style>
</head>

<body style="height: 100%;">
	<div class="container">
		<div th:replace="common/header::html"></div>
		<div id="game-hall" v-cloak>
			<nav class="navbar navbar-expand-sm game-category-navbar">
				<ul class="navbar-nav">
					<li class="nav-item" v-bind:class="{'selected-game-category-nav-item': selectedGameCategoryId == ''}" v-on:click="loadAllGameSituation"><a class="nav-link">全部游戏</a></li>
					<li class="nav-item" v-for="gameCategory in gameCategorys" v-bind:class="{'selected-game-category-nav-item': selectedGameCategoryId == gameCategory.id}" v-on:click="loadGameSituationByGameCategoryId(gameCategory.id)"><a class="nav-link">{{gameCategory.gameCategoryName}}</a></li>
				</ul>
			</nav>
			<div class="row">
				<div class="game col-sm-3" v-for="game in games">
					<div class="game-body">
						<div class="game-row1">
							<div class="game-logo">
								<img v-bind:src="'/images/lottery-logo/' + game.gameCode.toLowerCase() + '.png'" />
							</div>
							<div class="game-name-and-issue-num">
								<div>{{game.gameName}}</div>
								<div>
									第<span class="game-issue-num">{{game.currentIssue != null ? game.currentIssue : game.preIssue}}</span>期
								</div>
								<div class="countdown-clock">
									<template v-for="(clock, index) in game.countdownClock"> <span>{{clock}}</span> <em v-show="index != game.countdownClock.length - 1">:</em></template>
								</div>
							</div>
							<img class="hot-game-logo" src="/images/hot-game.png" v-show="game.hotGameFlag" />
						</div>
						<div class="game-pre-issue-lottery-label">上期开奖:</div>
						<div class="game-pre-issue-lottery">
							<div class="game-pre-issue-lottery-content">
								<span v-for="num in splitlotteryNum(game.preIssueLotteryNum)">{{num}}</span>
							</div>
							<div class="game-lottery-tip" v-show="game.currentIssue != null && game.preIssueLotteryNum == null">正在开奖...</div>
							<div class="game-lottery-tip" v-show="game.currentIssue == null">休市中...</div>
						</div>
						<div class="game-action">
							<div class="btn-group">
								<button type="button" class="btn btn-lg" v-on:click="toLotteryHistoryPage(game)">开奖趋势</button>
								<button type="button" class="btn btn-lg btn-danger" v-on:click="toBettingPage(game)">立即投注</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var gameHallVM = new Vue({
			el : '#game-hall',
			data : {
				selectedGameCategoryId : '',
				gameCategorys : [],
				games : [],
				countdownInterval : null
			},
			computed : {},
			created : function() {
			},
			mounted : function() {
				this.loadGameCategory();
				this.loadAllGameSituation();
			},
			methods : {

				toBettingPage : function(game) {
					if (game.gameCategoryCode == 'SSC') {
						window.location.href = '/ssc?gameCode=' + game.gameCode;
					} else {
						layer.alert('未实现', {
							title : '提示',
							icon : 7,
							time : 3000
						});
					}
				},

				toLotteryHistoryPage : function(game) {
					if (game.gameCategoryCode == 'SSC') {
						window.location.href = '/lottery-history?gameCode=' + game.gameCode;
					} else {
						layer.alert('未实现', {
							title : '提示',
							icon : 7,
							time : 3000
						});
					}
				},

				loadAllGameSituation : function() {
					var that = this;
					that.$http.get('/game/findAllGameSituation').then(function(res) {
						that.selectedGameCategoryId = '';
						that.renderGame(res.body.data, res.body.timestamp);
					});
				},

				loadGameSituationByGameCategoryId : function(gameCategoryId) {
					var that = this;
					that.$http.get('/game/findGameSituationByGameCategoryId', {
						params : {
							gameCategoryId : gameCategoryId
						}
					}).then(function(res) {
						that.selectedGameCategoryId = gameCategoryId;
						that.renderGame(res.body.data, res.body.timestamp);
					});
				},

				renderGame : function(games, now) {
					if (this.countdownInterval != null) {
						window.clearInterval(this.countdownInterval);
						this.countdownInterval = null;
					}
					for (var i = 0; i < games.length; i++) {
						var endTime = games[i].currentIssueEndTime;
						if (endTime == null) {
							endTime = games[i].nextIssueEndTime;
						}
						var second = dayjs(endTime).diff(dayjs(now), 'second');
						games[i].second = second;
						games[i].countdownClock = [];
					}
					this.games = games;
					this.countdown();
				},

				loadGameCategory : function() {
					var that = this;
					that.$http.get('/game/findAllGameCategory').then(function(res) {
						this.gameCategorys = res.body.data;
					});
				},

				countdown : function() {
					var that = this;
					that.countdownInterval = window.setInterval(function() {
						var games = that.games;
						var clearIntervalFlag = true;
						for (var i = 0; i < games.length; i++) {
							var second = games[i].second;
							if (second < 0) {
								continue;
							}
							games[i].countdownClock = that.buildCountdownClock(second);
							second--;
							games[i].second = second;
							clearIntervalFlag = clearIntervalFlag && (second < 0);
						}
						if (clearIntervalFlag) {
							window.clearInterval(that.countdownInterval);
						}
					}, 1000);
				},

				buildCountdownClock : function(second) {
					var that = this;
					var countdownHour = 0;
					var countdownMinute = 0;
					var countdownSecond = 0;
					if (second > 0) {
						countdownHour = parseInt(second / (60 * 60) % 24);
						countdownMinute = parseInt(second / 60 % 60);
						countdownSecond = parseInt(second % 60);
					}
					if (countdownHour < 10) {
						countdownHour = '0' + countdownHour;
					}
					if (countdownMinute < 10) {
						countdownMinute = '0' + countdownMinute;
					}
					if (countdownSecond < 10) {
						countdownSecond = '0' + countdownSecond;
					}
					return [ countdownHour, countdownMinute, countdownSecond ];
				},

				splitlotteryNum : function(lotteryNum) {
					if (lotteryNum == null || lotteryNum == '') {
						return [];
					}
					return lotteryNum.split(',');
				}
			}
		});
	</script>
</body>
</html>